<!-- src/views/PayForm.vue -->
<template>
  <div class="pay-loading">正在跳转到支付宝支付，请稍候...</div>
</template>

<script setup>
import { onMounted } from 'vue'
import { useRoute } from 'vue-router'
import request from '@/utils/request'

const route = useRoute()
const total = route.query.total
const subject = route.query.subject

onMounted(() => {
  if (!total || !subject) {
    alert('支付参数错误，请重新发起支付。')
    return
  }

  request.get('/doPay', {
    params: {
      total,
      subject,
    }
  }).then(res => {
    if (res.code === 0 && res.data.includes('<form')) {
      const div = document.createElement('div')
      div.innerHTML = res.data
      document.body.appendChild(div)

      const form = div.querySelector('form')
      if (form) {
        form.submit()
      } else {
        alert('支付表单生成失败。')
      }
    } else {
      alert('接口返回异常，未能生成支付页面。')
    }
  }).catch(err => {
    console.error('请求失败：', err)
    alert('请求支付接口失败，请稍后再试。')
  })
})
</script>

<style scoped>
.pay-loading {
  padding: 2rem;
  text-align: center;
  font-size: 1.2rem;
  color: #666;
}
</style>
